<template>
  <div class="container">
    <el-card>
      <!-- 头部 -->
      <div class="header">
        <el-row>
          <el-form :inline="true" label-width="70px" size="small">
            <el-col :span="18">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="6" style="text-align: right">
            <el-button type="success" @click="showAddDialog = true" size="small"
              >新增面试技巧</el-button
            >
          </el-col>
        </el-row>
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <!-- 表格 -->
      <el-table :data="articlesList" style="width: 100%">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="title" label="文章标题">
          <template #default="{ row }">
            {{ row.title }}
            <i
              v-if="row.videoURL"
              style="color: blue"
              class="el-icon-film"
              @click="handleVideo(row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template #default="{ row }">
            {{ formattingTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="preview(row)">预览</el-button>
            <el-button type="text" @click="handleDisabled(row)">
              <span v-if="row.state === 1">禁用</span>
              <span v-else>启用</span>
            </el-button>
            <el-button
              type="text"
              :disabled="row.state === 0"
              @click="edit(row)"
              >修改</el-button
            >
            <el-button type="text" :disabled="row.state === 0" @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="height: 40px; margin-top: 20px">
        <el-pagination
          background
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="form.pagesize"
          layout=" prev, pager, next,sizes"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增文章弹窗 -->
    <ArticlesAdd
      ref="addDialog"
      :showAddDialog="showAddDialog"
      :articleForm="articleForm"
      @closeAddDialog="closeAddDialogFn"
      @add-articles="getArticles"
      @removeArticleForm="removeArticleFormFn"
    ></ArticlesAdd>
    <!-- 预览弹窗 -->
    <ArticlesPreview
      :showPreviewDialog="showPreviewDialog"
      :previewItem="previewItem"
      @closePreDialog="closePreDialogFn"
    >
    </ArticlesPreview>
    <!-- 视频弹窗 -->
    <el-dialog
      id="videoDialog"
      class="video"
      width="40%"
      :visible="videoShowDialog"
    >
      <el-button
        id="closeBtn"
        @click="closeVideo"
        type="info"
        icon="el-icon-close"
        circle
      ></el-button>
      <video src="#" width="100%" autoplay controls></video>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove, detail } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'

export default {
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      showAddDialog: false, // 新增文章弹窗
      showPreviewDialog: false, // 预览弹窗
      form: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        keyword: '', // 关键字
        state: null // 状态
      },
      articleForm: {}, // 单个文章详情
      articlesList: [], // 文章列表
      total: 0, // 标签总数
      previewItem: {}, // 点击的预览详情
      videoShowDialog: false, // 视频预览
      // 视频路径
      videoUrl: ''
    }
  },
  created () {
    this.getArticles()
  },
  methods: {
    // 获取文章列表
    async getArticles () {
      const {
        data: { counts, items }
      } = await list(this.form)
      this.articlesList = items
      this.total = counts
      // console.log(items)
    },
    handleSizeChange (val) {
      this.form.pagesize = val
      this.getArticles()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getArticles()
    },
    // 格式化时间
    formattingTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 处理禁用
    async handleDisabled (row) {
      await changeState({
        ...row,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      this.getArticles()
    },
    // 关闭添加弹窗
    closeAddDialogFn () {
      this.showAddDialog = false
    },
    // 删除
    del (row) {
      this.$confirm('此操作将永久删除该文章，是否继续', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.getArticles()
      })
    },
    // 修改
    async edit (row) {
      const { data } = await detail(row)
      this.articleForm = data
      this.showAddDialog = true
    },
    // 清空表单
    removeArticleFormFn () {
      this.articleForm = {}
    },
    // 预览
    preview (row) {
      this.showPreviewDialog = true
      this.previewItem = row
    },
    // 关闭预览弹窗
    closePreDialogFn () {
      this.showPreviewDialog = false
    },
    // 搜索功能
    search () {
      this.page = 1
      this.getArticles()
    },
    // 清除功能
    clear () {
      this.form.keyword = ''
      this.form.state = null
    },
    // 视频预览
    handleVideo (row) {
      this.videoShowDialog = true
      this.videoUrl = row
    },
    // 点击关闭视频预览
    closeVideo (row) {
      this.videoShowDialog = false
      this.videoUrl = ''
    }
  }
}
</script>

<style scoped lang='scss'>
#videoDialog {
  ::v-deep {
    .el-dialog__header {
      background-color: transparent;
      height: 0 !important;
      padding: 0;
    }
  }
  ::v-deep {
    .el-dialog__body {
      padding: 0;
      height: 0;
    }
  }
  #closeBtn {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate(-11px);
    background-color: rgb(60, 57, 57);
    opacity: 0.6;
  }
}
</style>
